import { FC } from "react";
import { recommend } from "@/mocks/home/recommend";

interface paramsProps {
  category_url: string;
}

const Content: FC<paramsProps> = (props: paramsProps) => {
  console.log(props.category_url);
  return (
    <div className=' flex flex-col flex-1 w-2/3 mx-6'>
      <div className=' flex py-4 mb-4 bg-white rounded-sm'>
        <div className=' w-1/3 px-4 border-r-2 border-dashed'>
          <div className=' flex justify-between'>
            <div className=' flex items-center text-base'>
              <img
                className=' w-5 h-5 mr-2'
                src='https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/article.52e2cca.png'
              />
              综合文章榜
            </div>
            <div className=' text-slate-400'>更多</div>
          </div>
          <div className=' flex flex-col justify-around mt-2'>
            <div className=' flex'>
              <div className=' bg-gradient-to-b to-amber-500 from-orange-600 bg-clip-text mr-2 font-bold text-transparent'>
                1
              </div>
              <div className=' hover:text-blue-400 hover:cursor-pointer'>TypeChat 入门指南</div>
            </div>
            <div className=' flex my-2'>
              <div className=' bg-gradient-to-b to-amber-500 from-orange-600 bg-clip-text mr-2 font-bold text-transparent'>
                2
              </div>
              <div className=' hover:text-blue-400 hover:cursor-pointer'>
                慎重选择~~ 第四家公司刚...
              </div>
            </div>
            <div className=' flex'>
              <div className=' bg-gradient-to-b to-amber-500 from-orange-600 bg-clip-text mr-2 font-bold text-transparent'>
                3
              </div>
              <div className=' hover:text-blue-400'>禁止别人调试自己的前端...</div>
            </div>
          </div>
        </div>
        <div className=' w-1/3 px-4 border-r-2 border-dashed'>
          <div className=' flex justify-between'>
            <div className=' flex items-center text-base'>
              <img
                className=' w-5 h-5 mr-2'
                src='https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/books.ee6cdd2.png'
              />
              精选专栏榜
            </div>
            <div className=' text-slate-400'>更多</div>
          </div>
          <div className=' flex flex-col justify-around mt-2'>
            <div className=' flex'>
              <div className=' mr-2'> 1 </div>
              <div className=' hover:text-blue-400 hover:cursor-pointer'>JS每日一算法</div>
            </div>
            <div className=' flex my-2'>
              <div className=' mr-2'> 2 </div>
              <div className=' hover:text-blue-400 hover:cursor-pointer'>人工智能周刊</div>
            </div>
            <div className=' flex'>
              <div className=' mr-2'> 3 </div>
              <div className=' hover:text-blue-400'>酱酱们的每日掘金</div>
            </div>
          </div>
        </div>
        <div className=' w-1/3 px-4'>
          <div className=' flex justify-between'>
            <div className=' flex items-center text-base'>
              <img
                className=' w-5 h-5 mr-2'
                src='https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/star.641eec7.png'
              />
              推荐收藏集
            </div>
            <div className=' text-slate-400'>更多</div>
          </div>
          <div className=' flex flex-col justify-around mt-2'>
            <div className=' flex'>
              <div className=' mr-2'> 1 </div>
              <div className=' hover:text-blue-400 hover:cursor-pointer'>React开发实用</div>
            </div>
            <div className=' flex my-2'>
              <div className=' mr-2'> 2 </div>
              <div className=' hover:text-blue-400 hover:cursor-pointer'>
                超级经典的，每日必看的
              </div>
            </div>
            <div className=' flex'>
              <div className=' mr-2'> 3 </div>
              <div className=' hover:text-blue-400'>CSS及样式管理</div>
            </div>
          </div>
        </div>
      </div>
      <div className=' flex-1 bg-white'>
        {recommend.map((item, index) => {
          return (
            <div key={index} className=' border-b-1 py-4 mx-4 border-gray-200'>
              <div className=''>
                <div className=' text-sm text-gray-500'>
                  {item.item_info.author_name || item.item_info.author_user_info?.user_name} | 1
                  天前
                </div>
                <div className=' flex justify-between'>
                  <div className=' flex-1 mr-4'>
                    <div className=' my-2 text-base font-bold'>
                      {item.item_info?.title || item.item_info.article_info?.title}
                    </div>
                    <div className=' text-gray-500'>
                      {item.item_info?.brief || item.item_info.article_info?.brief_content}
                    </div>
                  </div>
                  <img
                    className=' w-40 h-20'
                    src='https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'
                  />
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default Content;
